<template>
<div class="index">
  <div class="path w">
    <div class="left">中文 | English</div>
    <div class="path-main">
			<span v-if="isLogin" class="hover" @click="goToOutLogin">您好，退出登录</span>
      <span v-else class="hover" @click="goToLogin">登录</span>
      <el-dropdown style=" cursor:pointer;">
        <span class="el-dropdown-link">
          关注中心<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>关注中心</el-dropdown-item>
          <el-dropdown-item>关注中心</el-dropdown-item>
          <el-dropdown-item>关注中心</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>		
      <el-dropdown style=" cursor:pointer;">
        <span class="el-dropdown-link">
          展商中心<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>展商中心</el-dropdown-item>
          <el-dropdown-item>展商中心</el-dropdown-item>
          <el-dropdown-item>展商中心</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>			
      <span class="hover">帮助中心</span>
      <span class="hover">加入收藏</span>
    </div>
  </div>
  <div class="path-ad">
    <div class="ad w"><img src="@/assets/img-09.jpg"/></div>
  </div>
  <div class="w header">
    <img class="logo" src="@/assets/logo.jpg"/>
    <div class="index-head-box">
      <div class="index-ser-tab"><span class="cur">展会</span><span>店铺</span><span>资讯</span></div>
      <div class="index-search">
        <div class="index-ser-wrap"><input placeholder="展会" type="text"></div>
        <div class="index-ser-btn"></div>
      </div>
      <div class="index-hots">
        <span>热门搜索：</span><a href="#">医药展药品</a><a href="#">交易化妆品</a><a href="#">成人用品</a><a href="#">药品</a><a href="#">交易化妆品</a><a href="#">医药展</a>
      </div>
    </div>
  </div>
  <div class="nav w">
    <a href="#">首页</a><a href="#">产品</a><a href="#">展商</a><a href="#">展会</a><a href="#">会议</a><a href="#">资讯</a><a href="#">关于国药励展</a>
  </div>
  <div class="pic-ad w" v-if="barImg">
    <img :src="barImg"/>
  </div>
  <div class="w creat-path">    
    <el-steps :active="pathAction+1" finish-status="success" align-center>
      <el-step title="登录、注册"></el-step>
      <el-step title="填写预登记信息"></el-step>
      <el-step title="填写调查问卷"></el-step>
      <el-step title="完成预登记"></el-step>
    </el-steps> 
  </div>
  <pathTwo v-model="pathAction" v-if="pathAction == 1"></pathTwo> 
  <pathThree v-model="pathAction" v-if="pathAction == 2"></pathThree> 
  <pathFour v-model="pathAction" v-if="pathAction == 3"></pathFour> 
  <div class="w footer">
    <div class="link">
      <div class="link-li">
        <p>关于我们</p>
        <a href="#">网站简介</a><a href="#">联系我们</a><a href="#">站点地图</a><a href="#">安全与隐私</a><a href="#">知识产权政策</a><a href="#">服务条款</a>
      </div>
      <div class="link-li">
        <p>展商服务</p>
        <a href="#">搭建店铺</a><a href="#">广告服务</a><a href="#">搭建店铺</a><a href="#">广告服务</a>
      </div>
      <div class="link-li">
        <p>观众服务</p>
        <a href="#">找产品</a><a href="#">找展商</a><a href="#">联系展商</a><a href="#">观众预登记</a>
      </div>
      <div class="link-li">
        <p>帮助</p>
        <a href="#">如何注册会员？</a>
        <p style=" margin-top:50px;">其他</p>
        <a href="#">媒体合作</a>	
      </div>									
    </div>
    <div class="aobut">
      <p>联系我们</p>
      <div class="t td">联系我们</div>
      <div class="t">400-888-6666</div>
      <div class="t">海淀区鑫三元写字楼三层</div>
    </div>
  </div>
  <div class="wt">
    <div class="w f-link">
      友情链接: <a href="#">中华化工网</a><a href="#">昆山赛格电子市场</a><a href="#">第一化学网</a><a href="#">中国商机网</a><a href="#">塑料化工原料猫网</a><a href="#">新材料产业</a><a href="#">石油化工在线</a><a href="#">千盟化工网</a>
    </div>
    <div class="w f-btx">
      © 2005-2016 国药励展展览有限责任公司 京ICP备06050757号-33
    </div>
  </div>
</div>
</template>
<script>
import config from "@/config";
import pathTwo from "./components/path-two";
import pathThree from "./components/path-three";
import pathFour from "./components/path-four";

export default {
	components: {pathTwo,pathThree,pathFour },
  data() {
		return {
			isLogin:config.isLogin,
			pathAction:this.$route.query.tab ? parseInt(this.$route.query.tab) : 1,
			barImg:''
		}
	},
	mounted() {
		this.id = this.$route.query.id ? this.$route.query.id : '';	
		this.getDetail();
	},
	methods: {
		async getDetail(){
			var map = {
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid,
				exhibitionUuid :this.id,			
			};
			var param = config.setFormData('getExhibitionDetail',map)
			var res = await this.$http.post(config.appCall,param);
			if(res.data && res.data.return_code == '0'){
				this.barImg = 'https://reg.reed-sinopharm.com/'+res.data.infoDto.planeFigure;
			}		
		},
		goToOutLogin(){
			localStorage.userInfo = '';
			config.userInfo = '';
			this.$router.push({path: '/login?id='+this.id})	
		},
		goToLogin(){
			this.$router.push({path: '/login?id='+this.id})	
		}	
	}
}
</script>
<style scoped>
.index{}
.path{ display:flex; font-size:14px; color:#333;}
.path .left{ width:200px; text-align:left;height:40px; line-height:40px; }
.path-main{ flex:1; display:flex; justify-content:flex-end;}
.path-main span{height:40px; line-height:40px; margin-right:20px; cursor:pointer;}
.path-main .hover:hover{ text-decoration:underline;}
.path-ad{ background-image: linear-gradient(to right, #DF9E7E, #ECB08C)}
.header{ height:95px; overflow:hidden;}
.header .logo{ float:left;}

.index-head-box{width:546px;position:relative; height:140px; float:right;}
.index-ser-tab{  font-size:14px; padding-top:10px;}
.index-ser-tab span{ float:left; margin-right:15px; height:28px; line-height:25px; cursor:pointer;}
.index-ser-tab span.cur{ color:#E1251B;}

.index-search{ width:546px;  display:flex; height:32px; border:2px solid #E1251B;  top:25px; left:70px;}
.index-ser-wrap{  width:488px;  background:#fff;}
.index-ser-wrap input{ float:left; border:0; outline:none;  font-size:12px; width:380px; height:24px; margin:4px 16px 0;}
.index-ser-wrap img{ float:right; margin:9px 17px 0 0; cursor:pointer;}
.index-ser-btn{ flex:1; background:#E1251B url(../assets/icon-05.png) no-repeat center center; cursor:pointer;}
.index-ser-btn:hover{ background-color:#C81623}
.index-hots{ font-size:14px; padding-top:5px;}
.index-hots a{ margin-right:10px; color:#666;}

.nav{ height:80px; line-height:80px; text-align:right;}
.nav a{ margin-left:105px; font-weight:bold;color:#666; text-decoration:none;}
.nav a:hover{ text-decoration:underline;}
.creat-path{ padding-top:50px;}
.pic-ad img{ width:1100px;}

.footer{display:flex; justify-content:space-between; padding-bottom:30px;  margin-top:80px;}
.link{ flex:1; display:flex;}
.link-li{ width:25%;}
.link-li p{ font-weight:bold; margin:0; padding-bottom:13px;}
.link-li a{ display:block; line-height:1.8; font-size:14px; color:#333; text-decoration:none;}
.link-li a:hover{ text-decoration:underline;}
.aobut{ width:300px; margin-left:80px;  background:url(../assets/about.jpg) no-repeat  0 50px;}
.aobut p{ margin:0;font-weight:bold; padding-left:7px; }
.aobut .t{ font-size:14px; line-height:1.6;  margin:0 0 6px 120px;}
.aobut .td{ margin:40px 0 12px 90px;}

.wt{ width:100%; border-top:1px solid #DCDFE6}
.f-link{ text-align:center; padding:30px 0 12px; text-align:center; font-size:14px;}
.f-link a{ margin:0 5px;}
.f-btx{ text-align:center; font-size:14px; padding-bottom:30px;}
</style>